import React, { Component } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { Row, Col, Button, Form, Input, Checkbox, Alert, Icon } from 'antd';
import styles from './Forget.less';
import {toast} from '@/utils/utils';

@connect(({forget, loading})=>({
  forget,
  submitting: loading.effects['forget/forgetPassword'],
  sending: loading.effects['forget/sendVerifyCode'],
}))
@Form.create()
class ForgetPage extends Component{

  state = {
    count: 0,
  }

  handleSubmit = e=>{
    e.preventDefault();

    const {form} = this.props;
    form.validateFields((err, values)=>{
      if(!err){

        if(values.newPassword !== values.newPasswordConfirm) {
          toast('两次密码不一致')
          return;
        }
        const { dispatch } = this.props;
        dispatch({
          type: 'forget/forgetPassword',
          payload: {
            ...values,
          },
        });
      }
    })
  }

  handleSendVerifyCode = ()=>{
    const {dispatch, form} = this.props;

    form.validateFields(['email'], (err, values)=>{
      if(!err){
        dispatch({
          type: 'forget/sendVerifyCode',
          payload: {
            ...values,
          }
        })

        let count = 59;
        this.setState({ count });
        this.interval = setInterval(() => {
          count -= 1;
          this.setState({ count });
          if (count === 0) {
            clearInterval(this.interval);
          }
        }, 1000);
      }
    })
  }

  render(){
    const { forget, submitting, sending, form } = this.props;
    const {count} = this.state;

    return (
      <div className={styles.main}>
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <Form.Item>
            {
              form.getFieldDecorator('email', {
                rules: [{required: true, message: '请输入合法的邮箱',type: 'email'}]
              })(
                <Input prefix={<Icon type={'mail'} className={styles.input}></Icon>} placeholder='邮箱'/>
              )
            }
          </Form.Item>
          <Form.Item>
            <Row gutter={8}>
              <Col span={16}>
                {
                  form.getFieldDecorator('verifyCode', {
                    rules: [{required: true, message: '请输入验证码'}]
                  })(
                    <Input prefix={<Icon type={'cloud'} className={styles.input}></Icon>} placeholder='验证码'/>
                  )
                }
              </Col>
              <Col span={8}>
                <Button
                  className={styles.btnSendVerifyCode}
                  disabled={count}
                  onClick={this.handleSendVerifyCode.bind(this)}>{count||'发送验证码'}</Button>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            {
              form.getFieldDecorator('newPassword', {
                rules: [{required: true, message: '请输入新密码'}]
              })(
                <Input type='password' prefix={<Icon type={'lock'} className={styles.input}></Icon>} placeholder='新密码'/>
              )
            }
          </Form.Item>
          <Form.Item>
            {
              form.getFieldDecorator('newPasswordConfirm', {
                rules: [{required: true, message: '请输入确认密码'}]
              })(
                <Input type='password' prefix={<Icon type={'lock'} className={styles.input}></Icon>} placeholder='确认密码'/>
              )
            }
          </Form.Item>
          <Form.Item>
            <Button
              className={styles.btnSubmit}
              loading={submitting}
              type='primary'
              htmlType='submit'
              onClick={this.handleSubmit.bind(this)}>找回密码</Button>
            <Link className={styles.backLogin} to='/user/login'>返回登录</Link>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

export default ForgetPage;
